<template>
  <div v-if="aeVo">
    <Form ref="frontConfigForm" :model="aeVo" :rules="ruleValidate" :label-width="100">
      <FormItem label="直播标题" prop="liveTitle">
        <Input v-model="aeVo.liveTitle" placeholder=""></Input>
      </FormItem>
      <FormItem label="开始时间" prop="liveStartTime">
        <DatePicker type="datetime" :format="'yyyy-MM-dd HH:mm'" v-model="aeVo.liveStartTime" placeholder="开始时间"></DatePicker>
      </FormItem>
      <FormItem label="结束时间" prop="liveEndTime">
        <DatePicker type="datetime" :format="'yyyy-MM-dd HH:mm'" v-model="aeVo.liveEndTime" placeholder="结束时间"></DatePicker>
      </FormItem>
      <FormItem label="直播封面" prop="liveCover">
        <Input v-model="aeVo.liveCover" placeholder="" style="display: none"></Input>
        <image-upload :previewRatio="'200/126'" :aspectRatio="'0/0'" :image-url="aeVo.liveCover" v-on:successHandle="logoUpdateHandle"></image-upload>
      </FormItem>
      <FormItem label="直播内容" prop="liveContent">
        <summernote v-model="aeVo.liveContent"></summernote>
      </FormItem>
      <FormItem label="直播链接" prop="liveUrl">
        <Input v-model="aeVo.liveUrl" placeholder=""></Input>
      </FormItem>
    </Form>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import summernote from '../common/summernote';
  import imageUpload from '../common/image-upload';
  import {SERVICE_URLS} from "../../libs/service.url";

  export default {
    props: ['closeHandle', 'targetData'],
    components: {
      summernote,
      imageUpload
    },
    data() {
      return {
        aeVo: null,
        ruleValidate: {
          liveTitle: [
            {required: true, message: '直播标题不能为空！', trigger: 'blur'}
          ],
          liveStartTime: [
            {required: true, type: 'date', message: '直播开始时间不能为空！', trigger: 'change'}
          ],
          liveEndTime: [
            {required: true, type: 'date', message: '直结束时间不能为空！', trigger: 'change'}
          ],
          liveCover: [
            {required: true, message: '直播封面不能为空！', trigger: 'blur'}
          ]
        },
        bIsAdd: false
      }
    },
    created() {
      if (this.targetData) {
        this.bIsAdd = false;
        this.aeVo = Object.assign({},this.targetData);
      } else {
        this.bIsAdd = true;
        this.aeVo = {
          id : '',
          liveTitle: "",
          liveStartTime: "",
          liveEndTime: "",
          liveCover: "",
          liveContent: "",
          liveUrl: ""
        }
      }
    },
    methods: {
      handleSubmit() {
        let self = this;
        this.$refs['frontConfigForm'].validate((valid) => {
          if (valid) {
            let url;
            if (self.bIsAdd) {
              url = SERVICE_URLS.live.add ;
            } else {
              url = SERVICE_URLS.live.edit;
            }
            this.aeVo.liveStartTime = moment(this.aeVo.liveStartTime).format('YYYY-MM-DD hh:mm');
            this.aeVo.liveEndTime = moment(this.aeVo.liveEndTime).format('YYYY-MM-DD hh:mm');
            Vue.submit(self, {
              loading: 'loading',
              url: url,
              data: self.aeVo,
              callback: (_data) => {
                self.$Message.success('操作成功!');
                if (self.closeHandle) {
                  self.closeHandle();
                }
              }
            })
          } else {

          }
        });
      },
      logoUpdateHandle (val) {
        this.aeVo.liveCover = val;
      },
      handleReset() {
        this.$refs['frontConfigForm'].resetFields();
      },
      closeModal() {
        this.handleReset();
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
